<template>
    <div class="pt-[30px] pb-[20px] bg-white">
        <el-tabs v-model="activeStep" class="demo-tabs">
            <el-tab-pane label="基本信息" :name="0">
                <div>
                    <!-- 基本信息 -->
                    <div class="bg-white ">
                        <!-- <BaseHead>基本信息</BaseHead> -->
                        <div class="p-[10px]">
                            <el-descriptions title="" :column="2" border label-width="140">
                                <el-descriptions-item label-class-name="gdlable" label="成果名称">{{
            ruleForm.name
        }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="所属单位">
                                    <Feedback :id="ruleForm.unitId" :list="zcgsdwList"
                                        :mapping="['codeColumn', 'valueColumn']">
                                    </Feedback>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="成果联系人">{{
            ruleForm.txAuthorName
        }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="联系人电话">{{
                ruleForm.txAuthorTel
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="第一完成人">{{
                ruleForm.firstAuthorName
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="完成人电话">{{
                ruleForm.authorTel
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="研发起止时间"
                                    v-if="ruleForm.researchDate && ruleForm.researchDate.length">{{
            ruleForm.researchDate[0]
        }}-{{
                ruleForm.researchDate[1] }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="知识产权类型">{{
            formatTypeId(ruleForm.typeId)
        }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="知识产权编号">{{
                ruleForm.code
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="成果体现形式">{{
                formatManifestationId(ruleForm.manifestationId)
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="技术成熟度">{{
                formatMatureId(ruleForm.matureId)
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="技术先进度">{{
                formatAdvancedId(ruleForm.advancedId)
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="所属高新技术领域">{{
                formatDomainId(ruleForm.domainId)
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="成果主要应用行业">
                                    {{
                formatIndustryId(ruleForm.industryId)
            }}
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="成果获得方式">{{
                formatObtainId(ruleForm.obtainId)
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="获得政府支持情况"
                                    v-if="ruleForm.support">
                                    {{ formatSupportId(ruleForm.support.check) }} <br>
                                    计划/专项类别：{{ ruleForm.support.type }}<br>
                                    获得经费：{{ ruleForm.support.fee }}
                                    自筹资金：{{ ruleForm.support.zczj }}
                                    自筹资金来源：{{ ruleForm.support.zczj_source }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="成果简介">{{
                                    ruleForm.introduce
                                    }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="成果附件">
                                    <div v-for="item in ruleForm.fileList" :key="item.id">
                                        {{ item.fileName
                                        }}<el-link type="primary" style="margin-left: 8px"
                                            @click="downloadMet(item.id)">下载</el-link>
                                    </div>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="所需支持或建议">{{
                                    ruleForm.suggestion
                                    }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="拟采取转化方式">{{
                                    formatTransforId(ruleForm.transforId)
                                    }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="备注">{{
                                    ruleForm.note
                                    }}</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import useCategoryStore from "@/store/modules/category";

const props = defineProps({
    id: String,
})


const categoryStore = useCategoryStore();
const {
    shztList,
    zcgsdwList,
    xlList,
    zcList,
    zscqList,
    manifestationIdList,
    matureIdList,
    advancedIdList,
    domainIdList,
    sshyList,
    obtainIdList,
    supportIdList,
    transforIdList,
} = storeToRefs(categoryStore) // 解构状态
const {
    getshztList,
    getzcgsdwList,
    getxlList,
    getzcList,
    getsshyList,
    getzscqList,
    getManifestationIdList,
    getMatureIdList,
    getAdvancedIdList,
    getDomainIdList,
    getObtainIdList,
    getSupportIdList,
    getTransforIdList,
} = categoryStore // 解构方法



const ruleForm = reactive({})
const tableData = reactive([])


const formatTypeId = (cellValue) => {
    if (zscqList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(zscqList.value.find((item) => item.code == element).name)
        })
        return format.join(",")
    } else {
        return ''
    }
}
const formatManifestationId = (cellValue) => {
    if (manifestationIdList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(manifestationIdList.value.find((item) => item.code == element).name)
        })
        return format.join(",")
    } else {
        return ''
    }
}
const formatMatureId = (cellValue) => {
    if (matureIdList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(matureIdList.value.find((item) => item.code == element).name)
        })
        return format.join(",")
    } else {
        return ''
    }
}
const formatAdvancedId = (cellValue) => {
    if (advancedIdList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(advancedIdList.value.find((item) => item.code == element).name)
        })
        return format.join(",")
    } else {
        return ''
    }
}
const formatDomainId = (cellValue) => {
    if (domainIdList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(domainIdList.value.find((item) => item.code == element).name)
        })
        return format.join(",")
    } else {
        return ''
    }
}

const formatIndustryId = (cellValue) => {
    if (sshyList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(sshyList.value.find((item) => item.id == element) ? sshyList.value.find((item) => item.id == element).label : '')
        })
        return format.join(",")
    } else {
        return ''
    }
}
const formatSupportId = (cellValue) => {
    if (supportIdList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(supportIdList.value.find((item) => item.code == element).name)
        })
        return format.join(",")
    } else {
        return ''
    }
}

const formatObtainId = (cellValue) => {
    if (obtainIdList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(obtainIdList.value.find((item) => item.code == element).name)
        })
        return format.join(",")
    } else {
        return ''
    }
}
const formatTransforId = (cellValue) => {
    if (transforIdList.value.length && cellValue) {
        let format = []
        cellValue.forEach((element) => {
            format.push(transforIdList.value.find((item) => item.code == element).name)
        })
        return format.join(",")
    } else {
        return ''
    }
}


const getRuleForm = (i) => {
    if (!shztList.value.length) {
        getshztList()
    }
    if (!zcgsdwList.value.length) {
        getzcgsdwList()
    }
    if (!sshyList.value.length) {
        getsshyList()
    }
    if (!xlList.value.length) {
        getxlList()
    }
    if (!zcList.value.length) {
        getzcList()
    }

    if (!zscqList.value.length) {
        getzscqList()
    }
    if (!manifestationIdList.value.length) {
        getManifestationIdList()
    }
    if (!matureIdList.value.length) {
        getMatureIdList()
    }
    if (!domainIdList.value.length) {
        getDomainIdList()
    }
    if (!advancedIdList.value.length) {
        getAdvancedIdList()
    }
    if (!obtainIdList.value.length) {
        getObtainIdList()
    }
    if (!supportIdList.value.length) {
        getSupportIdList()
    }
    if (!transforIdList.value.length) {
        getTransforIdList()
    }

    for (const key in i) {
        ruleForm[key] = i[key]
    }
    ruleForm.researchDate = [ruleForm.researchStartdate, ruleForm.researchEnddate]
    ruleForm.typeId = ruleForm.typeId.split(',')
    ruleForm.manifestationId = ruleForm.manifestationId.split(',')
    ruleForm.matureId = ruleForm.matureId.split(',')
    ruleForm.advancedId = ruleForm.advancedId.split(',')
    ruleForm.domainId = ruleForm.domainId.split(',')
    ruleForm.industryId = ruleForm.industryId.split(',')
    ruleForm.obtainId = ruleForm.obtainId.split(',')
    ruleForm.transforId = ruleForm.transforId.split(',')
    ruleForm.support = JSON.parse(ruleForm.supportId)
    ruleForm.support.check = ruleForm.support.check.split(',')
    ruleForm.txAuthorName = JSON.parse(ruleForm.txAuthor).name


}

const activeStep = ref(0)
const { proxy } = getCurrentInstance()
const downloadMet = (i) => {
    proxy.$download.common(i)
}

defineExpose({
    getRuleForm,
})
</script>
<style lang="scss">
.gdlable {
    width: 140px;
}
</style>
<style scoped lang="scss">
@import url('@/views/achievement/index.scss');

:deep(.el-select--default) {
    .el-select__wrapper.is-disabled {
        background-color: #fff;
        box-shadow: 0 0 0 0px var(--el-select-disabled-border) inset;
        color: #606266;
        cursor: not-allowed;

        .el-select__selected-item {
            color: #606266;
        }
    }

    .el-select__suffix {
        display: none;
    }
}
</style>